<template>
  <div class="yd-card">
    <div class="yd-card-header">
      <span class="title">预订酒店</span>
      <span class="tag"></span>
      <span class="bg"></span>
    </div>
    <div class="search-box">
      <div class="search-top">
        <div class="search-name" :class="{ 'heng-line': areaVisible }">
          <div class="search-title">目的地/酒店名称</div>
          <el-select
            v-model="ruleForm.destination"
            placeholder="请输入目的地/酒店名称"
            filterable
            popper-class="area-select"
            :teleported="false"
            @visible-change="visibleChange"
          >
            <el-option-group
              v-for="group in cityList"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.id"
                :label="item.displayName"
                :value="item.id"
              />
            </el-option-group>
          </el-select>
        </div>
        <div class="search-time">
          <div class="search-time-title">
            <span>入住</span>
            <span>退房</span>
          </div>
          <el-date-picker
            v-model="ruleForm.date"
            type="daterange"
            :range-separator="`—— ${diffDays}晚 ——`"
            :clearable="false"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            start-placeholder="Start date"
            end-placeholder="End date"
            :prefix-icon="'null'"
            :disabled-date="useDisabled"
            @change="getDateDiff"
          />
        </div>
      </div>
      <div class="search-bottom">
        <div class="search-params">
          <div class="search-house">
            <div class="house-title">房间及住客</div>
            <el-popover
              trigger="click"
              placement="bottom-start"
              :width="260"
              :hide-after="0"
              :persistent="true"
              popper-class="house-popover"
            >
              <div class="popover-content">
                <div class="num-box">
                  <span class="num-type"><i class="iFont">房间</i></span
                  ><el-input-number
                    @change="houseNumChange"
                    v-model="houseForm.houseNum"
                    :min="1"
                    :max="10"
                  />
                </div>
                <div class="num-box">
                  <span class="num-type"
                    ><i class="iFont">成人</i>&nbsp;18岁及以上</span
                  ><el-input-number v-model="houseForm.manNum" :min="1" />
                </div>
                <div class="num-box">
                  <span class="num-type"
                    ><i class="iFont">儿童</i>&nbsp;0-17岁</span
                  ><el-input-number v-model="houseForm.childNum" :min="0" />
                </div>
              </div>
              <!-- <div style="text-align: right; margin: 0;border-top: 1px solid #ccc;padding-top: 15px;">
                <el-button size="small" type="primary" @click="visible = false"
                  >确认</el-button
                >
              </div> -->
              <template #reference>
                <div class="house-result" @click="visible = true">
                  {{ houseForm.houseNum }}间，{{
                    houseForm.manNum + houseForm.childNum
                  }}位
                </div>
              </template>
            </el-popover>
          </div>
          <div class="search-level">
            <div class="hotal-title">酒店级别</div>
            <el-select
              v-model="levelId"
              placeholder="请选择酒店级别"
              filterable
              :teleported="false"
              popper-class="hotal-level"
            >
              <el-option
                v-for="level in levelOptions"
                :key="level.value"
                :label="level.label"
                :value="level.value"
              />
            </el-select>
          </div>
          <div class="search-keys">
            <div class="">关键词（选填）</div>
            <el-input v-model="keyWord" placeholder="火车站/地点/酒店名字" />
          </div>
        </div>
        <div class="search-button">
          <el-button type="primary" :icon="Search">搜索</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { getDict, getCity } from "@/api/home";
import { timeFormatter, timeDiff } from "@/utils/tools";

onMounted(async () => {
  await getCityList();
  await getHotalLvList();
});

interface HouseForm {
  houseNum: number;
  manNum: number;
  childNum: number;
}
const houseForm = ref<HouseForm>({
  houseNum: 1,
  manNum: 1,
  childNum: 0,
});

// 目的地/酒店名称
const areaVisible = ref(false);
// 关键词
const keyWord = ref("");
// 入住 晚数
const diffDays = ref(1);
// 房间及住客
const visible = ref(false);
// 目的地
const cityList: any = ref([]);
// 酒店级别
const levelId = ref("");
const levelOptions = ref([]);
const getHotalLvList = async () => {
  levelOptions.value = await getDict({ dictValue: "hotal_level" });
};
// 获取目的地
const getCityList = async () => {
  const res = await getCity();
  cityList.value = res;
};
// 房间住客改变
const houseNumChange = async () => {
  const { houseNum, manNum } = houseForm.value;
  houseForm.value.manNum = Math.max(houseNum, manNum);
};
// 目的地/酒店名称下拉显示/隐藏
const visibleChange = async (visible: boolean) => {
  areaVisible.value = visible;
};
// 表单
interface RuleForm {
  destination: string;
  date: any;
}
const ruleForm = reactive<RuleForm>({
  destination: "武汉",
  date: [
    timeFormatter(new Date()),
    timeFormatter(new Date().getTime() + 86400000),
  ],
});
// 禁用时间段
const useDisabled = (time: Date) => {
  return (
    new Date(time).getTime() - (new Date().getTime() - 60 * 60 * 24 * 1000) < 0
  );
};
// 计算入住天数
const getDateDiff = () => {
  diffDays.value = timeDiff(ruleForm.date[0] as any, ruleForm.date[1] as any);
};
</script>

<style scoped lang="scss">
.yd-card {
  // width: 706px;
  // height: 260px;
  padding-bottom: 20px;
  background: linear-gradient(90deg, #73bcfa 0%, #fff 100%, #fff 100%);
  border-radius: 12px;
  // padding: 20px;
  box-sizing: border-box;
  position: relative;
  border: 1px solid #d6ecff;
  &-header {
    display: flex;
    justify-content: space-between;
    height: 70px;
    align-items: center;
    .title {
      font-size: 26px;
      color: #fff;
      position: relative;
      z-index: 1;
      margin-left: 20px;
    }
    .tag {
      height: 28px;
      width: 157px;
      background-size: contain;
      background-image: url(https://pages.c-ctrip.com/hotels/online/img/easy-stay.png);
      background-repeat: no-repeat;
      margin-right: 25px;
    }
    .bg {
      height: 100px;
      width: 380px;
      background-image: url(https://pages.c-ctrip.com/hotels/online/img/homepage-hotel-searchbox-background.png);
      background-size: contain;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .search-box {
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 0 16px;
    box-sizing: border-box;
    // margin-top: 20px;
    .search-top {
      // display: flex;
      height: 80px;
      border-radius: 12px;
      background-color: #fff;
      padding: 16px 0;
      box-sizing: border-box;

      .search-name {
        display: inline-block;
        width: 44.3%;
        border-right: 1px solid #ccc;
        font-size: 14px;
        // padding-right: 20px;
        box-sizing: border-box;
        position: relative;

        .search-title {
          padding-left: 16px;
        }
        ::v-deep(.el-select) {
          width: 100%;
          border: none;
          .el-input__wrapper {
            box-shadow: none !important;
            padding-left: 0;
            .el-input__inner {
              font-size: 18px;
              font-weight: bold;
              padding-left: 16px;
            }
            .el-input__suffix {
              display: none;
            }
          }
        }
      }
      .heng-line {
        &::after {
          content: "";
          display: inline-block;
          width: calc(100% - 9px);
          height: 2px;
          background-color: #409eff;
          position: absolute;
          left: 9px;
          bottom: -9px;
        }
      }
      .search-time {
        display: inline-block;
        width: 55.7%;
        // padding: 0 20px;
        box-sizing: border-box;
        .search-time-title {
          display: flex;
          font-size: 14px;
          justify-content: space-between;
          padding: 0 27px;
        }
        ::v-deep(.el-date-editor) {
          box-shadow: none;
          padding: 0;
          width: 100%;
          .el-icon {
            display: none;
          }
          .el-range-input {
            font-size: 18px;
            font-weight: bold;
          }
          .el-range-separator {
            white-space: nowrap;
          }
        }
      }
    }
    // .search-top {
    //   // display: flex;
    //   border-radius: 12px;
    //   background-color: #fff;
    //   border: 1px solid #d6ecff;
    // }
    .search-bottom {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .search-params {
        flex: 1;
        // display: flex;
        height: 80px;
        border-radius: 12px;
        background-color: #fff;
        padding: 16px;
        padding-left: 0;
        box-sizing: border-box;
        border: 1px solid #d6ecff;
        font-size: 14px;
        & > div {
          // flex: 1;
          display: inline-block;
          margin-left: 20px;
          border-right: 1px solid #ccc;
        }
        .search-house {
          margin-left: 0;
          width: 26%;
          vertical-align: top;
          .house-title {
            padding-left: 16px;
          }
          .house-result {
            // line-height: 32px;
            font-size: 18px;
            font-weight: bold;
            padding-left: 16px;
            color: #606266;
          }
        }
        .search-level {
          width: 33%;
          padding-right: 20px;
          box-sizing: border-box;
          vertical-align: top;
          margin-left: 0;
          .hotal-title {
            padding-left: 20px;
          }
          ::v-deep(.el-select) {
            width: 100%;
            border: none;
            .el-input__wrapper {
              box-shadow: none !important;
              padding-left: 0;
              .el-input__inner {
                font-size: 18px;
                font-weight: bold;
                padding-left: 20px;
              }
            }
          }
        }
        .search-keys {
          border: 0;
          width: 30.3%;
          vertical-align: top;
          ::v-deep(.el-input) {
            .el-input__wrapper {
              box-shadow: none !important;
              padding-left: 0;
            }
          }
        }
      }
      .search-button {
        width: 163px;
        margin-left: 20px;
        height: 78px;
        .el-button {
          width: 100%;
          height: 100%;
          font-size: 24px;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.area-select {
  // height: 600px;
  width: 555px;
  // left: -16px!important;
  top: 41px !important;
  border-radius: 10px;
  .el-select-dropdown__wrap {
    max-height: fit-content;
    .el-scrollbar__view {
      margin: 0 !important;
    }
  }
  .el-popper__arrow {
    visibility: hidden;
  }
  .el-select-group__wrap {
    padding-bottom: 0;
    &::after {
      display: none;
    }
    & > li {
      padding: 0 5px;
    }
    .el-select-group__title {
      background-color: #f6f8fa;
      padding-left: 15px;
      font-weight: bolder;
      width: 553px;
      border-radius: 10px 10px 0px 0px;
    }
  }

  .el-select-group {
    margin-top: 5px;
    li {
      display: inline-block;
      width: 20%;
      padding: 0 10px;
      height: 32px;
    }
  }
}
.house-popover {
  .num-box {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .num-type {
      font-size: 12px;
      width: 180px;
      .iFont {
        font-size: 16px;
      }
    }
  }
}
</style>
